<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {getUser} from "@/utils/session";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {updatePass} from "@/api/sys/user.jsx"

let user = {}

const formattedPhone = computed(() => {
  if (ruleForm.value.phone)
    return `${ruleForm.value.phone.substring(0, 3)}****${ruleForm.value.phone.substring(9, 11)}`
  return null;
})

//密码
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  username: getUser().username,
  phone: getUser().mobile,
  pass: '',
  password: '',
  oldPass: ''
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else if (value == ruleForm.value.oldPass) {
    callback(new Error("新密码与旧密码一致"))
  } else {
    if (ruleForm.value.password !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('password')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.value.pass) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}
const validatePass1 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入旧密码'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{required: true, validator: validatePass, trigger: 'blur'}],
  password: [{required: true, validator: validatePass2, trigger: 'blur'}],
  oldPass: [{required: true, validator: validatePass1, trigger: 'blur'}]
})

async function submitForm() {
  if (!ruleForm.value.oldPass||!ruleForm.value.pass||!ruleForm.value.password) {
    return ElMessage({
      message: '请填写完整信息',
      type: 'warning'
    })
  }
  let res = await updatePass(ruleForm.value)
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: 'success'
    })
  }
}

//---------------生命周期---------------
onMounted(() => {
  user = getUser();
  console.log(user)
})
</script>

<template>
  <div>
    <div style="width:360px;margin: auto">
      <span>
        <span style="color: red;font-weight: normal;">*</span>
        账号:&nbsp;&nbsp;</span>
      <el-input
        v-model="ruleForm.username"
        style="width: 240px;"
        disabled
      />
      <br><br>
      <div style="width:360px;margin: auto -16px">
      <span>
        <span style="color: red;font-weight: normal;">*</span>
        手机号:&nbsp;&nbsp;</span>
        <el-input
          v-model="formattedPhone"
          style="width: 240px;"
          disabled
        />
      </div>
      <!--   密码  -->
      <br>
      <div style="width:323px;margin: auto -30px;">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码:" prop="oldPass">
            <el-input v-model="ruleForm.oldPass" type="password" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="新密码:" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="确认密码:" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <div style="width:80px;margin: 30px auto">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
::v-deep .el-input__inner {
  text-align: center;
}

span {
  font-weight: bolder;
  color: #606266;
  font-size: 15px;
}
</style>
